<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" name="productid" id="productid" v-model="proinfo.productid"/>
    <input type="text" v-model="proinfo.productname"/>
    <input type="text" v-model="proinfo.producttypeid"/>
    <input type="text" v-model="proinfo.productprice"/>
    <input type="text" v-model="proinfo.productnum"/>
    <input type="button" value="修改" @click="updatePro()"/>
</div>

<script>
    var app = new Vue({
        el: '#app',//我需要和那个区域做绑定
        data: {//数据
            proinfo:{}
        },
        methods:{
            updatePro:function () {
                $.ajax({
                    url:"/product/updateProduct",
                    type:"put",
                    data:JSON.stringify(app.proinfo),
                    contentType:"application/json",
                    dataType:"json",
                    success:function (returndata) {
                        window.location.href="/product/selectAll2";
                    }
                })
            }
        }
    })
    var  productid=[[${productid}]]
    $.ajax({
        url:"/product/selectbyid",
        type:"get",
        data:{productid:productid},
        dataType:"json",
        success:function (retturnaaa) {
            app.proinfo=retturnaaa;
        }
    })
</script>
</body>
</html>